<template>
  <div class="coupon_list activity">
    <navbar>野练</navbar>
    <div class="content">
      <Slide-bar :height="heights" scrollHeight="44px" :canDrag="isDrag" :flex=true  :list="tabList" :index="tabIndex" @on-change="change">
          <div :slot="`slot-item-${k}`" v-for="(i,k) in tabList">
              <LoadMore :height="heights" :load-more="loadMore" :refresh="refresh" :auto=false ref="pulldown" :has-more="tabList[tabIndex].hasMore">
                <div style="background-color: #eeeeee"  v-if="tabIndex===0">

                  <div class="list">

                    <ul>
                      <li v-for="i in dataList[tabIndex]">
                        <div class="liIn" @click="jump('coupon_detail', i.id)">
                          <div class="coupon_l">
                            <div class="coupon_l_l"></div>
                            <div class="coupon_l_r">
                              <p class="vmc-nowrap-2">{{ i.discount.title }}</p>
                            </div>
                          </div>
                          <div class="coupon_r">
                            <h2>
                              <button class="coupon_tag">野练</button>
                              <span>野练PASS</span>
                            </h2>
                            <p>{{ i.starts_at | date(i.ends_at) }}</p>
                          </div>
                        </div>
                        <div class="useBtn" @click="jump('city_list')">立即使用</div>
                      </li>
                    </ul>
                  </div>
                </div>
                <div  style="background-color: #eeeeee" v-if="tabIndex===1">
                  <div class="list list_grey">
                    <ul>
                      <li v-for="i in dataList[tabIndex]">
                        <div class="liIn" @click="jump('coupon_detail', i.id)">
                          <div class="coupon_l">
                            <div class="coupon_l_l"></div>
                            <div class="coupon_l_r">
                              <p class="vmc-nowrap-2">{{ i.discount.title }}</p>
                            </div>
                          </div>
                          <div class="coupon_r">
                            <h2>
                              <button class="coupon_tag">野练</button>
                              <span>野练PASS</span>
                            </h2>
                            <p>{{ i.starts_at | date(i.ends_at) }}</p>
                            <div class="status_tag"></div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <div style="background-color: #eeeeee" v-if="tabIndex===2">

                  <div class="list list_grey">
                    <ul>
                      <li v-for="i in dataList[tabIndex]">
                        <div class="liIn" @click="jump('coupon_detail', i.id)">
                          <div class="coupon_l">
                            <div class="coupon_l_l"></div>
                            <div class="coupon_l_r">
                              <p class="vmc-nowrap-2">{{ i.discount.title }}</p>
                            </div>
                          </div>
                          <div class="coupon_r">
                            <h2>
                              <button class="coupon_tag">野练</button>
                              <span>野练PASS</span>
                            </h2>
                            <p>{{ i.starts_at | date(i.ends_at) }}</p>
                            <div class="status_tag overdue"></div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </LoadMore>
              <!--<PullDown :height="heights" :load-more="loadMore" :refresh="refresh" :ref="`pulldown${k}`" v-if="tabIndex===1 && !tabList[tabIndex].isList">-->
                <!--<div slot="content" style="background-color:#eeeeee;height: 100%" >-->
                  <!--<div class="list list_grey">-->
                    <!--<ul>-->
                      <!--<li v-for="i in dataList[tabIndex]">-->
                        <!--<div class="liIn" @click="jump('coupon_detail', i.id)">-->
                          <!--<div class="coupon_l">-->
                            <!--<div class="coupon_l_l"></div>-->
                            <!--<div class="coupon_l_r">-->
                              <!--<p class="vmc-nowrap-2">{{ i.discount.title }}</p>-->
                            <!--</div>-->
                          <!--</div>-->
                          <!--<div class="coupon_r">-->
                            <!--<h2>-->
                              <!--<button class="coupon_tag">野练</button>-->
                              <!--<span>野练PASS</span>-->
                            <!--</h2>-->
                            <!--<p>{{ i.starts_at | date(i.ends_at) }}</p>-->
                            <!--<div class="status_tag"></div>-->
                          <!--</div>-->
                        <!--</div>-->
                      <!--</li>-->
                    <!--</ul>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</PullDown>-->
              <!--<PullDown :height="heights" :load-more="loadMore" :refresh="refresh" :ref="`pulldown${k}`" v-if="tabIndex===2 && !tabList[tabIndex].isList">-->
                <!--<div slot="content" style="background-color:#eeeeee;height: 100%" >-->

                  <!--<div class="list list_grey">-->
                    <!--<ul>-->
                      <!--<li v-for="i in dataList[tabIndex]">-->
                        <!--<div class="liIn" @click="jump('coupon_detail', i.id)">-->
                          <!--<div class="coupon_l">-->
                            <!--<div class="coupon_l_l"></div>-->
                            <!--<div class="coupon_l_r">-->
                              <!--<p class="vmc-nowrap-2">{{ i.discount.title }}</p>-->
                            <!--</div>-->
                          <!--</div>-->
                          <!--<div class="coupon_r">-->
                            <!--<h2>-->
                              <!--<button class="coupon_tag">野练</button>-->
                              <!--<span>野练PASS</span>-->
                            <!--</h2>-->
                            <!--<p>{{ i.starts_at | date(i.ends_at) }}</p>-->
                            <!--<div class="status_tag overdue"></div>-->
                          <!--</div>-->
                        <!--</div>-->
                      <!--</li>-->
                    <!--</ul>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</PullDown>-->
          </div>
      </Slide-bar>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import js from '../../../../cores/coupon/list.vue';
  //
  export default {
    extends: js
  }
</script>
<style rel="stylesheet/less" lang="less" type="text/less">
  @import "../../../../styles/ot.less";
.coupon_list {
  .vlc-slideBar {
    border: none;
    height: 100%;

    .vlc-slideBar-wrapper {
      border-bottom: 1px solid #dddddd;

      .vlc-slideBar-child {

        &.active {

          a {
            color: #008cee;
          }

        }
      }
      a {
        color: #666;
      }

    }
    .vlc-slideBar-content-item {
      overflow-y: auto;
    }
    .vlc-slideBar-content-item > div {
      background-color: #eeeeee;
      height: 100%;
    }
  }

  .noList {
    z-index: 999;
  }
  /*.vlc-slideBar{*/
  /*height:100%;*/
  /*!*.vlc-slideBar-wrapper{*!*/
  /*!*border-bottom: 1px solid #cccccc;*!*/
  /*!*padding:8px 0;*!*/
  /*!*.vlc-slideBar-child{*!*/
  /*!*a{*!*/
  /*!*display: inline;*!*/
  /*!*}*!*/
  /*!*}*!*/
  /*!*}*!*/
  /**/
  /*}*/


}
</style>
